<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Register</title>
        <link href="../css/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    </head>
   
    <body>
        <div id="wrapper">
        <!-- Common Header for our site -->
		<div id="header">
		    <div id="logo">
		        <h1><a href="../login/index.html">Clock Online System</a></h1>
		        <h2><a href="../login/index.html">Serving Guests Since 2011</a></h2>
		    </div>
		    <!-- end div#logo -->
		    <!-- end div#menu -->
		</div>
            <!-- end div#header -->
            <div id="page">
                <div id="content">
                    <div id="welcome">
                        <h2></h2>
                        <!-- Fetch Rows -->
                        <table class="aatable">
                                <tr><td colspan='2'><b>Register</b></td></tr>
                                <tr><td>EmpID:</td><td><input type='text' name='empid' id='empid' value=''/></td></tr>
                                <tr><td>User Name:</td><td><input type='text' name='username' id='username' value='' onchange='usernameinput()'/></td></tr>
<!--                                 <tr><td>First Name:</td><td><input type='text' name='firstname' id='firstname' value=''/></td></tr> -->
<!--                                 <tr><td>Last Name:</td><td><input type='text' name='lastname' id='lastname' value=''/></td></tr> -->
<!--                                 <tr><td>Chinese Name:</td><td><input type='text' name='namec' id='namec' value=''/></td></tr> -->
<!--                                 <tr><td>Japanese Name:</td><td><input type='text' name='namej' id='namej' value=''/></td></tr> -->
<!--                                 <tr><td>Sex:</td><td><input type='radio' name='sex' id='sex' value='male' checked='true'/>Male<input type='radio' name='sex' id='sex'  value='female'/>Female</td></tr> -->
<!--                                 <tr><td>Phone:</td><td><input type='text' name='phone' id='phone' value=''/></td></tr> -->
<!--                                 <tr><td>Mobile:</td><td><input type='text' name='mobile' id='mobile' value=''/></td></tr> -->
<!--                                 <tr><td>Address:</td><td><textarea name='address' id='address' value=''></textarea></td></tr> -->
<!--                                 <tr><td>Address 2:</td><td><textarea name='address1' id='address1' value=''></textarea></td></tr> -->
                                <tr><td>Password</td><td><input type='password' name='password' id='password' value='' readonly='true'/></td></tr>
                                <tr><td>Confirm Password</td><td><input type='password' name='confirmpassword' id='confirmpassword' value='' readonly='true'/></td></tr>
                                <video id="video" width="320" height="320" autoplay></video>
							    <button id="picture" style="display:block" >拍照</button>
							    <canvas style="display:block" id="canvas" width="320" height="320"></canvas>
		                        <textarea id="image" name="image" cols="40" rows="8" style="display:none"></textarea><br/>
                                <tr><td colspan='2'><input type='button' value='Register' onclick="register()"/>&nbsp;<input type='button' value='Cancel' onclick="location.href='../login/index.html'"/></td></tr>
                        </table> 
                    </div>
                    <!-- end div#welcome -->			
                    
                </div>
                <!-- end div#content -->
                <div id="sidebar">
                </div>
                <!-- end div#sidebar -->
                <div style="clear: both; height: 1px"></div>
            </div>
            <!-- Common footer for our site -->
			<div id="footer">
			    <p id="legal">Copyright &copy; 2017 Infosys. All Rights Reserved.<br/>
			    </p>
			</div>
        </div>
        <!-- end div#wrapper -->
    </body>
<script>  
   function register(){
	if (!submitCheck()) return;
   	$.ajax({
   		type : "post",
   		url : "../loginfacade/registerUserFacade",
   		dataType : 'json',
   		data : {
   			empid:$("#empid").val(),
   			username:$("#username").val(),
   			firstname:"",
   			lastname:"",
   			namec:"",
   			namej:"",
   			sex:"male",
   			phone:"",
   			mobile:"",
   			address:"",
   			address1:"",
   			password:$("#password").val(),  
   			confirmpassword:$("#confirmpassword").val(),   			
   			image : $("#image").val()
   		},
   		success : function(data, textStatus) {
   			if (data.success) {
   				window.location.href = "../login/register.html"
   			}else{
   				alert(data.errorMessage);
   			}
   		},
   		complete : function(XMLHttpRequest, textStatus) {
   		},
   		error : function(XMLHttpRequest, textStatus, errorThrown) {
   			alert("Error:" + textStatus);
   			alert(errorThrown.toString());
   		}
   	});
   }

   navigator.getUserMedia = navigator.getUserMedia ||
   navigator.webkitGetUserMedia ||
   navigator.mozGetUserMedia;
   if (navigator.getUserMedia) {
       navigator.getUserMedia({ audio: true, video: { width: 320, height: 320 } },
               function(stream) {
                   var video = document.getElementById("video");
                   video.src = window.URL.createObjectURL(stream);
                   video.onloadedmetadata = function(e) {
                       console.log('nihao44eee4aaaaddda');
                       video.play();
                   };
               },
               function(err) {
                   console.log("The following error occurred: " + err.name);
               }
       );
   } else {
       console.log("getUserMedia not supported");
   }
   var context = document.getElementById("canvas").getContext("2d");
   document.getElementById("picture").addEventListener("click", function () {
       context.drawImage(video, 0, 0, 320, 320);
       var imgData=document.getElementById("canvas").toDataURL("image/png");
       var data=imgData.substr(22);
       //$.post('recorder/target/sc',{'sj':data});
       $("#image").val(data);
   });
   
   function usernameinput(){
		var username = $("#username").val();
		$("#password").val(username);
		$("#confirmpassword").val(username);
	}

	function isBlank(val){
		if (val == undefined || val == null || val == "") return true;
		else return false;
	}

	function isStrAlphaNumeric(val){
		if (isBlank(val)) return false;
		for (var i=0;i<val.length;i++){
			var ch = val.charAt(i);
			if (!isChAlphaNumeric(ch)) return false;
		}
		return true;
	}

	function isStrNumeric(val){
		if (isBlank(val)) return false;
		for (var i=0;i<val.length;i++){
			var ch = val.charAt(i);
			if (!isChNumeric(ch)) return false;
		}
		return true;
	}

	function isChAlphaNumeric(ch){
		if (ch >= '0' && ch <='9') return true;
		else if (ch >='a' && ch <='z') return true;
		else if (ch >='A' && ch <='Z') return true;
		else return false;
	}

	function isChNumeric(ch){
		if (ch >= '0' && ch <='9') return true;
		else return false;
	}

	function submitCheck(){		
		var empid = $("#empid").val();
		var username = $("#username").val();
		var image = $("#image").val();
		if (isBlank(empid)){
			alert("Empid can not be empty!");
			return false;
		}
		if (isBlank(username)){
			alert("Username can not be empty!");
			return false;
		}
		if (isBlank(image)){
			alert("Image can not be empty!");
			return false;
		}
		if (!isStrNumeric(empid)){
			alert("Empid must be numeric!");
			return false;
		}
		if (!isStrAlphaNumeric(username)){
			alert("Username must be alpha numeric!");
			return false;
		}
		return true;
	}
</script>
</html>
